<template>
    <view class="guide-box">
        <view class="nav-bar-custom" :style="{paddingTop: phoneConfig.statusBarHeight + 'px'}">
            <uni-nav-bar :title="title">
                <view slot="left">
                    <uni-icons @click="backAction()" type="back" size="25"></uni-icons>
                </view>
            </uni-nav-bar>
        </view>
        <view class="guide-section">
            <swiper
                class="swiper"
                :touchable="false"
                style="height: 100%"
                @change="currentChange"
                :current="current"
            >
                <swiper-item
                    class="guide-swiper-item"
                    @touchmove.stop="() => true"
                    v-for="(item, index) in pageMsg" :key="index"
                >
                    <view class="swiper-section-box">
                        <scroll-view
                            :scroll-y="true"
                            style="height: 100%"
                        >
                            <view>
                                <view
                                    v-for="(item2, index2) in item.content" :key="index2"
                                    :style="{display:'flex', justifyContent: item2.position, alignItems: item2.position}"
                                >
                                    <!--  文本    -->
                                    <view
                                        class="text-box"
                                        v-if="item2.type==0 && item2.content"
                                        :style="{fontSize: item2.size+'px', color: item2.color}"
                                    >
                                        <text
                                            :style="{textAlign: item2.position, fontSize: item2.size+'px', color: item2.color}"
                                        >{{ item2.content }}</text>
                                    </view>
                                    <!--  图片    -->
                                    <view
                                        class="img-box"
                                        v-if="item2.type==1"
                                        :style="{display:'flex', justifyContent: item2.position, alignItems: item2.position}"
                                    >
                                        <image
                                            :src="item2.content"
                                            mode="widthFix"
                                            :style="{textAlign: item2.position,height: '360rpx'}"
                                        ></image>
                                    </view>
                                </view>
                            </view>
                        </scroll-view>





<!--                        <view class="swiper-header">-->
<!--                            {{item}}-->
<!--                        </view>-->
<!--                        <view class="swiper-section">-->
<!--                            <image src=""></image>-->
<!--                        </view>-->
<!--                        <view class="swiper-footer"></view>-->
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="bottom-box">
            <button
                @click="nextPage"
                class="btn"
                type="operation"
            >下一步</button>
        </view>
        <uni-popup ref="popup"></uni-popup>
    </view>
</template>

<script>
export default {
    onLoad(opt) {
        const deviceInfo = uni.getSystemInfoSync()
        this.phoneConfig.statusBarHeight = deviceInfo.statusBarHeight
        this.phoneConfig.screenHeight = deviceInfo.screenHeight
        this.phoneConfig.screenWidth = deviceInfo.screenWidth
        this.pageMsg = JSON.parse(opt.pageMsg)
        this.title = this.pageMsg[0].title? this.pageMsg[0].title: '配网'
        console.log('传递的信息', this.pageMsg)
        console.log('手机信息', deviceInfo)
    },
    onReady() {

    },
    mounted() {
    },
    data() {
        return {
            phoneConfig: {
                statusBarHeight: 0,
                screenWidth: 0,
                screenHeight: 0,
            },
            current: 0,
            pageMsg: null,
            title: '',
        };
    },
    methods: {
        currentChange(e) {
            this.current = e.detail.current
        },
        nextPage() {
            if(this.current < this.pageMsg.length - 1) {
                this.current += 1
            } else {
                // 跳转到下个页面
                console.log('跳转到下个页面');
                uni.navigateTo({
                    url: '/jvss/pagesDevice/device/wifi/wifi'
                })
                return
            }
            const num = this.current
            console.log(this.pageMsg[num].title)
            if(this.pageMsg[num].title) {
                this.title = this.pageMsg[num].title
            } else {
                this.title = '配网'
            }
        },
        backAction() {
            // 返回
            if(this.current <= 0) {
                console.log('返回上一页');
                uni.navigateBack({})
            } else {
                this.current -= 1
            }
            const num = this.current
            if(this.pageMsg[num].title) {
                this.title = this.pageMsg[num].title
            } else {
                this.title = '配网'
            }
        }
    }
}
</script>

<style lang="scss">
.guide-box {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .guide-section {
        flex: 1;
        //background-color: #B7BDC6;
        width: 100%;
        .guide-swiper-item {
            width: 100%;
            height: 100%;
            .swiper-section-box {
                padding: 20px 0;
                box-sizing: border-box;
                height: 100%;
                overflow-y: scroll;
                .text-box {
                    width: 60%;
                    min-height: 200rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .img-box {
                    width: 360rpx;
                    height: 360rpx;
                    display: flex;
                }
            }
        }
    }
    .bottom-box {
        width: 100vw;
        height: 150rpx;
        //display: flex;
        //align-items: center;
        //.btn {
        //    top: 20%;
        //}
    }
}
</style>
